<template>
  <div class="registerAccept">
    <x-header v-show="!isWeChar">
      <div slot="default" class="common__header--title">{{pageTitle}}</div>
      <div @click="goBack" slot="overwrite-left" class="common__header--img"><img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back"></div>
    </x-header>
    <div class="header">
      <div class="user_title">邀请开店，立即行动</div>
    </div>
    <div class="content w_94" v-show="isReturnImg">
      <!-- 后台返回的分享二维码 -->
      <img :src="channel.qrCodeImgBase64[user.userDto.userCode]" alt="分享二维码" class="qrcode">

      <!-- 推广奖励规则说明 -->
      <div class="desc" @click="showRemarks()">推广奖励规则说明</div>
      <grid :cols="4" class="service_list">
        <grid-item v-for="menu in menus" :key="menu.id">
          <img slot="icon" :src="menu.imgUrl">
          <span slot="label">{{menu.name}}</span>
        </grid-item>
      </grid>
    </div>
    <div class="btn_div w_94">
      <x-button type="primary" class="w_49 f_l" :disabled="isDisabled" @click.native="openPosterShare()">邀请海报</x-button>
      <x-button type="primary" class="w_49 f_r" :disabled="isDisabled" @click.native="shareShow()">邀请链接</x-button>
    </div>
    <!-- 微信遮罩提示 -->
    <div class="weChatShadeDiv" v-show="weChatShade" @click="shareHide">
      <img class="details__arrow" src="~assets/x3/share-it.png">
      <a href="JavaScript:void(0);" class="follow">
        <p>
          请点击右上角<br>即可分享当前内容
        </p>
      </a>
    </div>
    <!-- 普通浏览器分享二维码 -->
    <x-dialog v-model="isShowShareDialog" class="share-Einv" hide-on-blur>
      <div class="share-div">
        <qrcode class="share-qrcode" :value="shareLinkUrl" type="img"></qrcode>
        <div id="shop-share"></div>
      </div>
    </x-dialog>

  </div>
</template>

<script>
import { RequestUrl } from "src/common/url";
import { XHeader, Group, Grid, GridItem, Cell, XButton, Qrcode, XDialog } from "vux";
import { Mutations, RouteUrl, StrLenth, WE_CHAT, Url_Key } from "src/common/const";
import { mapState } from "vuex";

import SharePage from "src/js/sharePage"; //引入微信分享js
import share from 'src/common/share';//引入普通浏览器分享js
import "src/assets/share/share.min.css";
import "src/assets/share/jquery.share.min.js";

export default {
  computed: mapState(["user", "shareUuid", "saveInsure", "isWeChar", "channel",]),
  components: { XHeader, Group, Grid, GridItem, Cell, XButton, Qrcode, XDialog },
  data() {
    return {
      pageTitle: "恒华出行宝",
      isDisabled: true,//默认禁用提交按钮
      isReturnImg: false,//是否后台返回分享二维码
      shareLinkUrl: "",//二维码分享链接地址
      menus: [
        { id: 1, name: "实时提现", url: "", imgUrl: RequestUrl.BASE_URL_UPLOAD + "assets/x3/channel/register_accept/(1).png" },
        { id: 2, name: "丰厚奖励", url: "", imgUrl: RequestUrl.BASE_URL_UPLOAD + "assets/x3/channel/register_accept/(2).png" },
        { id: 3, name: "精选产品", url: "", imgUrl: RequestUrl.BASE_URL_UPLOAD + "assets/x3/channel/register_accept/(3).png" },
        { id: 4, name: "移动投保", url: "", imgUrl: RequestUrl.BASE_URL_UPLOAD + "assets/x3/channel/register_accept/(4).png" }
      ],

      isShowShareDialog: false, //是否显示百度分享选项
      weChatShade: false, //微信分享遮罩
    };
  },
  // watch: {
  //     insureType(cur, old) {
  //     }
  // },
  methods: {
    goBack() {
      this.$common.goBack(this);
    },
    //显示分享规则说明
    showRemarks() {
      let baseRate = 0.0;
      //查询积分配置规则
      let _this = this;
      _this.$common.storeCommit(_this, Mutations.UPDATE_LOADING_STATUS, true);//loading
      _this.$http.post(RequestUrl.FIND_SCORE_CONFIG).then(function (res) {
        _this.$common.storeCommit(_this, Mutations.UPDATE_LOADING_STATUS, false);//loading
        if (res.state != 0) {
          _this.$common.showMsg(_this, res.result, "red;", false); //显示错误信息
          return;
        }
        baseRate = res.result.referRate;// 直接上级比例
        if (baseRate > 0) {
          baseRate = parseInt(baseRate * 100);
        };
        let text = "<div style='text-align:left;'>奖励规则："
          + "<br/>您的好友完成一个成功的推广，您即可获奖对应保费" + baseRate + "%的宝豆，并与该保单同步生效后可提现，若退保将扣减该笔宝豆。"
          + "<br/>举例：经您的好友李先生推广后有客户投保，保费100元，3月1日生效。您可以马上获奖100×" + baseRate + "%×100的宝豆，3月1日后宝豆生效后可提现。</div>";
        // let text = "<div style='text-align:left;'>奖励规则："
        //   + "<br/>您的好友出单并获得了签单宝豆，您即可享受保费" + baseRate + "%的推广宝豆奖励。"
        //   + "<br/>注：好友保单生效后该奖励方可提现，若退保该奖励将扣减退回"
        //   + "<br/>举例：您的好友老张签单保费100元，3月1日生效。您可以马上获得100×" + baseRate + "%×100宝豆的奖励，3月1日后即可将这笔奖励提现。</div>";

        _this.$common.showMsg(_this, text, "gray", false);
      });
    },
    //显示分享
    shareShow() {
      if (localStorage["IS_WE_CHAR"] == "T") {
        //微信
        this.weChatShade = true;
        $("body").css("overflow-y", "hidden");
      } else {
        //普通浏览器分享
        this.isShowShareDialog = !this.isShowShareDialog;
      }
    },
    //微信分享关闭遮罩
    shareHide() {
      this.weChatShade = false;
      //启用滚动
      $("body").css("overflow-y", "auto");
    },
    //邀请海报
    openPosterShare() {
      this.$common.goUrl(this, RouteUrl.REGISTER_POSTER);
    },
    //初始化页面信息（上级渠道用户信息）
    initChannelData(shareUrl, headUrl) {
      if (this.$common.isEmpty(this.channel.qrCodeImgBase64[this.user.userDto.userCode])) {
        let params = {
          _this: this,
          userCode: this.user.userDto.userCode,
          shareUrl: shareUrl,//分享地址
          headUrl: headUrl,//头像地址
        }
        this.$common.storeCommit(this, Mutations.GET_REGISTER_QRCODE, params);//loading
      } else {
        this.isDisabled = false;//可点击按钮
        this.isReturnImg = true;//切换为接口返回的二维码图片
      }
    },
    //初始化分享信息
    initShareData(shareUrl, headUrl) {
      //微信分享初始数据
      let shareLinkData = {
        _this: this,
        shareData: {
          title: "恒华出行宝",
          desc: this.user.userDto.nickName + WE_CHAT.shareDesc_channel,
          imgUrl: headUrl,
          url: shareUrl,
          _this: this,
          type: 8//渠道
        }
      };
      // 初始微信分享
      SharePage.weChatShare(shareLinkData);

      // 初始普通浏览器分享
      share.shareInit(shareLinkData);
    },
  },
  mounted() {
    this.StrLenth = StrLenth; //字符长度常量
    this.$init.subPageInit(this);
    document.title = this.pageTitle;

    //添加禁止滑动或者拖拽事件即可。这样的话，即使是其他子事件的滑动或者拖拽也会在这里给阻止掉。
    $(".registerAccept").on("touchmove", function (e) {
      e.preventDefault();
    });

    //头像地址
    let headUrl = this.user.userDto.headUrl;
    if (this.$common.isEmpty(headUrl)) {
      //补全头像的图片路径
      headUrl = RequestUrl.WEB_PATH + "sticcxb/upload/userHeadImg/default/headImgDefault.jpg";
    } else {
      if (headUrl.indexOf("http:") < 0 && headUrl.indexOf("https:") < 0) {
        //补全头像的图片路径
        headUrl = RequestUrl.WEB_PATH + "sticcxb/" + headUrl;
      }
    }

    if (this.user.isLogin) {
      let shareId = this.$encode.hex_md5(this.user.userDto.userCode + ":1");//渠道分享

      //初始化分享信息
      this.$common.saveShare("渠道二维码", this, 8);//8=渠道

      let parmList = [];
      let urlParm = {
        key: Url_Key.SHARE_UUID,
        value: shareId
      }
      parmList.push(urlParm);
      //分享地址,例如：http://msi:8080/sticcxb/#/sticcxb/registeraccept?shareId=e56ef558dfbd874516b8f071a1b62278e49e(WX00000025加混淆码再加密后的)
      this.shareLinkUrl = RequestUrl.BASE_URL + RouteUrl.REGISTER_ACCEPT + this.$common.setShareUrl(parmList);

      this.initChannelData(this.shareLinkUrl, headUrl);//初始化页面信息（上级渠道用户信息）
      this.initShareData(this.shareLinkUrl, headUrl);//初始化分享信息
    } else {
      this.$common.goBack(this);
    }
  },
}
</script>

<style lang="scss" scoped>
.registerAccept {
  .w_94 {
    width: 94%; //跟底部按钮宽度保持一致
  }
  .w_49 {
    width: 49%; //单个按钮长度
  }
  .f_l {
    float: left;
  }
  .f_r {
    float: right;
  }
  //第二个按钮顶部取消边距
  .weui-btn {
    margin-top: 0px;
  }
  //按钮边框
  .weui-btn:after {
    border: 0px;
  }

  .header {
    position: relative;
    width: 100%;
    height: 180px;
    z-index: 0;
    background: url("~assets/x3/ba3x.jpg") rgba(0, 0, 0, 0.6) no-repeat;
    background-size: 100% 100%;
    .user_title {
      width: 80%;
      height: 40px;
      line-height: 40px;
      color: #fff;
      text-align: center;
      font-size: 20px;
      padding-top: 20px;
      margin: 0 auto;
    }
  }
  .content {
    position: fixed;
    z-index: 2;
    top: 130px;
    left: 3%;
    height: 57vh;
    background-color: white;
    border-radius: 6px;

    //分享二维码图片
    .qrcode {
      display: block;
      width: 50%;
      height: auto;
      margin: 5vh auto 0vh auto;
      // border: 1px solid;
      text-align: center;
    }
    //推广奖励规则说明
    .desc {
      color: gray;
      text-align: center;
      border-bottom: 1px solid;
      width: 130px;
      margin: -10px auto;
      font-size: 14px;
    }
    //服务列表
    .service_list {
      position: absolute;
      width: 100%;
      bottom: 3vh;
    }

    a:link {
      background-color: #fff !important;
    }
    a:visited {
      background-color: #fff !important;
    }
    a:hover {
      background-color: #fff !important;
    }
    a:active {
      background-color: #fff !important;
    }

    .weui-grid:before {
      border: 0px !important;
    }
    .weui-grid:after {
      border: 0px !important;
    }
    .weui-grids:before {
      border: 0px !important;
    }
    .weui-grids:after {
      border: 0px !important;
    }
  }
  .btn_div {
    position: fixed;
    height: 8vh;
    z-index: 2;
    bottom: 2vh;
    left: 3%;
  }
  //提交按钮失效时为亮灰色
  .weui-btn_disabled.weui-btn_primary {
    background-color: lightgray !important;
  }
}
</style>

